<template>
	<d2-container>
		<div v-if="privilege!=3">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>当前时间：{{ time }}</span>
			</div>
			<div class="indexBox">
				<div class="daySaleBox">
					<div class="imgPaddLeft"><img src="./image/dingdan.png" /></div>
					<div class="fontColor">
						<p class="fontSize">今日订单数</p>
						<p class="fontsize2">{{ all.allOrder }}</p>
					</div>
				</div>
				<div class="daySaleBox " style="background-color: #7CC422;">
					<div class="imgPaddLeft"><img src="./image/jine.png" /></div>
					<div class="fontColor">
						<p class="fontSize">今日订单金额</p>
						<p class="fontsize2">￥ {{ all.allPrice }}</p>
					</div>
				</div>
				<div class="daySaleBox" style="background-color: #FFA060;">
					<div class="imgPaddLeft"><img src="./image/yongjin.png" /></div>
					<div class="fontColor">
						<p class="fontSize">用户数量</p>
						<p class="fontsize2">￥ {{ all.allUser }}</p>
					</div>
				</div>
				<div class="daySaleBox" style="background-color: #FEC107;">
					<div class="imgPaddLeft"><img src="./image/yue.png" /></div>
					<div class="fontColor">
						<p class="fontSize">用户总余额</p>
						<p class="fontsize2">￥ {{ all.allYe }}</p>
					</div>
				</div>
			</div>
		</el-card>
		<el-card style="margin-top: 20px;">
			<div slot="header" class="clearfix">
				<div class="xsShuJu">
					<div>
						<span>销售概览</span>
					</div>
					<div>
						<el-radio-group v-model="radioState">
						    <el-radio :label="1">7天</el-radio>
						    <el-radio :label="2">半月</el-radio>
						    <el-radio :label="3">一月</el-radio>
						  </el-radio-group>
					</div>
				</div>
			</div>
			<div class="inner">
			  <ve-line :data="chartData" :extend="extend" ></ve-line>
			</div>
		</el-card>
		</div>
	</d2-container>
</template>

<script>
// import D2HelpBtn from './components/d2-help-btn'
// import D2Badge from './components/d2-badge'
// import D2PageCover from './components/d2-page-cover'
import dayjs from 'dayjs';
import { getIndex,getOrderStatistics } from '@/api/api';
export default {
	components: {
		// D2HelpBtn,
		// D2Badge,
		// D2PageCover
	},
	data() {
		return {
			timeInterval: null,
			time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
			all: {
				allNum: '',
				allOrder: '',
				allPrice: '',
				allYe: '',
				allYj: ''
			},
			radioState:1,
			extend: {
			  series: {
			    label: {
			      normal: {
			        show: true
			      }
			    }
			  }
			},
			chartData: {
			  columns: ['日期', '数据'],
			  rows: []
			},
			privilege:0,
		};
	},
	watch:{
		radioState(val){
			this.getBrokenline()
		}
	},
	mounted() {
		this.timeInterval = setInterval(() => {
			this.refreshTime();
		}, 1000);
		this.getData();
		this.getBrokenline();
		// this.privilege = window.sessionStorage.privilege
	},
	methods: {
		refreshTime() {
			this.time = dayjs().format('YYYY-MM-DD HH:mm:ss');
		},
		getData() {
			getIndex().then(res => {
				if (res.state == 0) {
					this.all = res.data;
				}
			});
		},
		getBrokenline(){
			this.chartData.rows.length=0;
			getOrderStatistics(this.radioState).then(res=>{
				if(res.state==0){
					for(let i=0;i<res.data.length;i++){
						let data={
							"日期":res.data[i].date,
							"数据":res.data[i].value
						}
						// this.chartData.rows[i]["日期"]=res.data[i].date;
						// this.chartData.rows[i]["数据"]=res.data[i].value;
						this.chartData.rows.push(data)
					}
				}
			})
		}
	}
};
</script>

<style>
/* .page {
  .logo {
    width: 120px;
  }
  .btn-group {
    color: $color-text-placehoder;
    font-size: 12px;
    margin-top: 0px;
    margin-bottom: 20px;
    .btn-group__btn {
      color: $color-text-sub;
      &:hover {
        color: $color-text-main;
      }
      &.btn-group__btn--link {
        color: $color-primary;
      }
    }
  }
} */
p {
	margin: 0;
}
.indexBox {
	display: flex;
}
.fontColor {
	padding-right: 20px;
	color: #fff;
}
.fontSize {
	font-size: 18px;
}
.fontsize2 {
	font-size: 20px;
	padding-right: 10px;
}
.imgPaddLeft {
	padding-left: 11px;
}
.imgPaddLeft img {
    width: 47px;
    height: 50px;
}
.daySaleBox {
	background: #10aef7;
	display: flex;
	justify-items: center;
	padding: 18px 13px;
	margin-right: 2%;
	border-radius: 8px;
	width: 21%;
	justify-content: space-between;
	align-items: center;
	height: 100px;
}
.xsShuJu{
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
}
</style>
